<template>
  <div @click="selectUser(item)" class="friend-card" :style="selectVisible && background">
    <div class="friend-card__left">
      <Avatar :size="40" :src="GroupInfo.avatar" />
      <span class="friend-card__left__name">{{ GroupInfo.name }}</span>
    </div>
    <div class="friend-card__right" v-if="unread !== 0">{{ unread }}</div>
  </div>
</template>

<script>
import { Avatar } from 'element-ui'
import { mapState } from 'vuex'
import _ from 'lodash'
export default {
  components: { Avatar },
  props: ['GroupInfo'],
  computed: {
    ...mapState('app', ['selectMember', 'unreadList']),
    unread: function () {
      if (!_.isUndefined(this.unreadList[this.GroupInfo.roomId.toString()])) {
        return this.unreadList[this.GroupInfo.roomId.toString()]
      } else {
        return 0
      }
    },
    selectVisible: function () {
      if (!_.isEqual(this.selectMember, {})) {
        return this.GroupInfo.roomId.toString() === this.selectMember.roomId.toString()
      } else {
        return false
      }
    }
  },
  data () {
    return {
      background: {
        backgroundColor: 'rgba(247,247,247,1)'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.friend-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  &__left {
    height: 60px;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    &__name {
      margin-left: 10px;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      width: 170px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      display: inline-block;
    }
  }
  &__right {
    background-color: #e93323;
    border-radius: 100px;
    color: white;
    font-size: 12px;
    padding: 0px 5px;
  }
}
</style>
